<template>
  <div class="w-full mx-auto text-[#fff] text-[14px]">
    <div class="flex flex-wrap sm:px-1">
      <div
          v-for="item in arr"
          :key="item.id"
          @click="clickChild(item)"
          class="w-full sm:w-1/3 p-2 box pb-0 sm:px-1"
      >
        <div class="bg-red-600 p-1">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Item {
  id: number;
  name: string;
}

// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(['clickChild'])

const props = defineProps({
  arr: {
    type: Array as () => Item[],
    required: true
  }
})

//使用父组件传递过来的值
const { arr } = toRefs(props)

const clickChild = (item:Item) => {
  //传递给父组件
  emit('clickChild',item)
}
</script>
